<!doctype html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />
	<title>
		<title>canvas-实现电子签名</title>
</head>
<style></style>

<body>
	<canvas style="margin: 50px"></canvas>
	<div>
		<button onclick="clearCtx()">清空画布</button>
		<button onclick="saveCtx()">保存为png</button>
	</div>
	<script>
		const config = {
			width: 300, // 元素宽，并不是画布宽
			height: 200, //  元素高，并不是画布高
			lineWidth: 5, // 线宽
			strokeStyle: 'rgba(0,0,0,.05)', // 画笔颜色
			lineCap: 'round', // 线条两端圆角
			lineJoin: 'round', // 线条交汇圆角
		};

		const canvas = document.querySelector('canvas');
		canvas.width = config.width;
		canvas.height = config.height;
		canvas.style.border = '1px dashed #000';
		
		const ctx = canvas.getContext('2d');
		ctx.strokeStyle = config.strokeStyle;
		ctx.lineWidth = config.lineWidth;
		ctx.lineCap = config.lineCap;
		ctx.lineJoin = config.lineJoin;

		// 设置填充颜色
		ctx.fillStyle = 'transparent';
		// 填充为矩形
		ctx.fillRect(
			0, // x 轴起始绘制位置
			0, // y 轴起始绘制位置
			config.width, // 宽度
			config.height // 高度
		);

		// 判断是否为移动端
		const isMobile = /Mobile|Android|iPhone/i.test(navigator.userAgent);

		// 创建鼠标/手势按下监听器
		canvas.addEventListener(isMobile ? 'touchstart' : 'mousedown', start);

		// 鼠标按下
		function start(event) {
			// 开始，同时断开与上一次画的联系
			ctx.moveTo(event.offsetX, event.offsetY)
			ctx.beginPath()

			// 监听鼠标移动-画
			canvas.addEventListener(isMobile ? 'touchmove' : 'mousemove', draw);
			// 监听鼠标抬起-移除画
			canvas.addEventListener(isMobile ? 'touchend' : 'mouseup', () => {
				ctx.closePath();
				canvas.removeEventListener(isMobile ? 'touchmove' : 'mousemove', draw);
			});
		}

		// 鼠标移动
		function draw(event) {
			console.log(event);
			ctx.lineTo(event.offsetX, event.offsetY)
			ctx.stroke();
		}

		// 清空画布
		function clearCtx() {
			ctx.clearRect(0, 0, config.width, config.height);
		}

		// 保存画布
		function saveCtx() {
			// 将canvas上的内容转成blob流
			canvas.toBlob(blob => {
				const a = document.createElement('a');
				a.download = `canvas-实现电子签名.png`;
				a.href = URL.createObjectURL(blob);
				a.click();
				a.remove();
			});
		}
	</script>
</body>

</html>